<template>
  <div class="edit-reply">
    <div class="wrap">
      <p class="text">热词内容:</p>
      <el-input type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="textarea"></el-input>
    </div>
    <div class="wrap wraptag">
      <p class="text">标签名称:</p>
      <div class="addtags">
        <span v-for = "(item, index) in tags"
              :key="index"
              class="box">{{item.name}}
          <span @click = "delTag(index)">×</span>
        </span>
        <el-input placeholder="请输入内容"
                  v-model.trim="input"
                  :maxlength = "10"
                  size="mini"
                  @blur="addTag(input)"></el-input>
      </div>
    </div>
    <div class="footer">
      <el-button class='slide-box__button' @click='cancelClick'>
        取消
      </el-button>
      <el-button class='slide-box__button' type="primary" @click='save'>
        保存
      </el-button>
    </div>
  </div>
</template>
<script>
  import {deepClone} from 'src/utils/m7Utils.js'
  export default {
    data () {
      return {
        textarea: '',
        input: '',
        tags: []
      }
    },
    methods: {
      // 取消
      cancelClick () {
        this.$emit('cancelClick')
      },
      save () {
        if (!this.textarea) {
          this.$message.error('热词内容不能为空')
          return
        }
        let data = {
          label: '',
          tags: this.tags,
          content: this.textarea
        }
        if (this.dealConten._id) {
          this.tags.map(item => {
            item._id = ''
          })
          data._id = this.dealConten._id
        } else {
          delete data.label
        }
        this.$emit('dealReply', data)
      },
      inti (obj) {
        if (JSON.stringify(obj) === '{}') {
          this.tags = []
          this.textarea = ''
        } else {
          this.tags = obj.tags
          this.textarea = obj.content
        }
      },
      delTag (index) {
        this.tags.splice(index, 1)
      },
      addTag (name) {
        this.input = ''
        let isSame = false
        this.tags.map(item => {
          if (item.name === name) {
            isSame = true
          }
        })
        if (isSame) {
          this.$message.error('不能添加相同的标签名')
          return
        }
        if (name) {
          this.tags.push({
            _id: '',
            name: name
          })
        }
      }
    },
    props: {
      dealConten: {
        type: Object,
        default: function () {
          return {}
        }
      }
    },
    watch: {
      dealConten (cur) {
        this.inti(deepClone(cur))
      }
    },
    beforeMount () {
      this.inti(deepClone(this.dealConten))
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../../assets/common.styl"
  .edit-reply
    padding 20px 16px
    height 100%
    .footer
      position absolute
      bottom 0
      left 0
      width 100%
      background rgba(255,255,255,1)
      box-shadow 0px -2px 4px 0px rgba(5,49,38,0.05)
      border-top 1px solid rgba(232,232,232,1)
      display flex
      justify-content center
      padding 13px 0
      box-sizing border-box
      .slide-box__button
        padding 8px 20px 8px
        box-sizing border-box
    .wrap-save
      height 30px
      margin-top 12px
    .wraptag
      margin-top 12px
    .wrap
      .text
        margin-bottom 10px
      .addtags
        .box
          display inline-block
          height 24px
          line-height 24px
          background #cce6ff
          padding 0 6px
          margin 0 16px 10px 0
          span
            color $c-main
            font-size 24px
            float right
            margin-left 10px
            cursor pointer
</style>
